<template>
	
	<div v-for="o in 6" :key="o">
		<div class="cad">
		    <el-row>
		        <el-col :span="7"><div class="grid-content ep-bg-purple" />
					<el-image  style="width: 260px; height: 160px;" src="https://img1.chexun.com/chexunimg/erpimg/2022/1204/icon_0_0_1fafd83f85fc42faa8917b3079a46ee0.png"></el-image>
				</el-col>
		        <el-col :span="16"><div class="grid-content ep-bg-purple-light" />
					<div v-for="blog in blogs" :key="blog" class="single-blog">
            <router-link :to="{ name: 'singlearticle', params: { id: blog.id } }">
                <h2 v-rainbow>{{ blog.title }}</h2>
            </router-link>
            <article>{{ blog.body }}</article>
        </div>
				</el-col>
		      </el-row>
		</div>
	</div>
	
</template>

<script>
import axios from 'axios'
export default {
    name: 'show-blog',
    data() {
        return {
            blogs: [],
            search: "",
            blogData: []
        }
    },
    created() {
        axios.get("http://jsonplaceholder.typicode.com/posts")
            .then(data => {
                this.blogs = data.data.slice(0, 10);
                this.blogData = data.data;
            })
    },
    directives: {
        rainbow: {
            mounted(el) {
                el.style.color = "#" + Math.random().toString(16).slice(2, 8);
            }
        }
    },
    methods: {
        Search() {
            // search是v-model="search"的search
            var search = this.search;
            // console.log(search);
            this.blogs = this.blogData.filter(item => {
                // console.log(item);
                if (item.title.indexOf(search) != -1) {
                    return item;
                }
            }).slice(0, 10)
        }
    }
}

	
</script>

<style >
	.body {
		margin-top: 20px;
		margin-left: 100px;
		margin-right: 200px;
	}
	
	.card-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.text {
	  font-size: 14px;
	}
	
	.item {
	  margin-bottom: 18px;
	}
	
	.box-card {
	  width: 480px;
	}
	
	.el-row {
	  margin-bottom: 20px;
	}
	.el-row:last-child {
	  margin-bottom: 0;
	}
	.el-col {
	  border-radius: 4px;
	}
	
	.grid-content {
	  border-radius: 4px;
	  min-height: 10px;
	  
	}
	
	.single-blog {
	    padding: 5px;
	    margin: 7px, auto;
	    box-sizing: border-box;
	    background: #ffffff;
	}
	
	.cad {
		margin-left: 13%;
		width: 70%;
		height: 180px;
		border-bottom: 1px solid lavender;
		
		
	}
</style>